<template>
  <!-- 排名变化页面 -->
  <div class="box">
    <div class="rankingChange_top">
      <van-row>
        <van-col
          span="8"
          :style="{ fontSize: '16px' }"
          @click="time = true"
        >{{ data_time }}
        </van-col>
        <!-- 时间插件 -->
        <van-popup
          v-model="time"
          :safe-area-inset-bottom="true"
          :style="{ width: '86%', fontSize: '14px', borderRadius: '10px' }"
          :overlay-style="{ background: 'rgba(0, 0, 0, 0.34)' }"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="getTime_month"
            @cancel="time = false"
          />
        </van-popup>
      </van-row>
    </div>
    <van-row v-if="list != null">
      <ul class="left">
        <li>总奖分</li>
        <li>{{ list.sumPraiseScore }}</li>
      </ul>
      <ul class="left">
        <li>总扣分</li>
        <li>{{ list.sumDeductScore }}</li>
      </ul>
      <ul class="left">
        <li>奖扣人次</li>
        <li>{{ list.sumPerTime }}</li>
      </ul>
      <ul class="left">
        <li>任务扣分</li>
        <li>{{ list.sumTaskDeductScore }}</li>
      </ul>
    </van-row>
    <van-row style="margin-top:15px">
      <van-switch
        v-model="checked_one"
        size="24px"
        @change="show_checked(1)"
      />
      <span>奖分</span>
      <van-switch
        v-model="checked_two"
        size="24px"
        @change="show_checked(2)"
      />
      <span>扣分</span>
      <van-switch
        v-model="checked_three"
        size="24px"
        @change="show_checked(3)"
      />
      <span>人次</span>
    </van-row>
    <div
      id="myChart"
      :style="{ width: '100%', height: '300px', marginTop: '30px' }"
    ></div>
    <van-overlay
      :show="isShowloading"
      @click="isShowloading = false"
    >
      <div
        class="wrapper"
        @click.stop
      >
        <van-loading
          vertical
          type="spinner"
          size="50"
        >数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script type="text/javascript">
import {
  Popup,
  Row,
  Col,
  DatetimePicker,
  Switch,
  Overlay,
  Loading
} from "vant";
export default {
  data() {
    return {
      isShowloading: false,
      checked_one: true,
      checked_two: false,
      checked_three: false,
      radio: "1",
      time: false,
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      arr: [],
      list: [],
      item: [],
      public_arr: [],
      praiseScoreList: [],
      deductScoreList: [],
      perTimeList: []
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Switch.name]: Switch,
    [Loading.name]: Loading,
    [Overlay.name]: Overlay
  },
  created() {
    // this.show_Rotation_chart();
    dd.biz.navigation.setTitle({
      title: "奖扣任务统计" //控制标题文本，空字符串表示显示默认文本
    });
  },
  mounted() {
    // this.drawLine();
    this.dataTime();
  },
  methods: {
    //   开关选择
    show_checked(i) {
      this.item = [];
      this.public_arr = [];
      if (this.checked_one == true && i == 1) {
        this.checked_two = false;
        this.checked_three = false;
        let list_arr = this.praiseScoreList;
        for (let i = 0; i < list_arr.length; i++) {
          this.item.push(list_arr[i].praiseScoreTarget);
          this.public_arr.push(list_arr[i].praiseScore);
        }
        this.drawLine();
      }
      if (this.checked_two == true && i == 2) {
        this.checked_one = false;
        this.checked_three = false;
        let list_arr = this.deductScoreList;
        for (let i = 0; i < list_arr.length; i++) {
          this.item.push(list_arr[i].deductScoreTarget);
          this.public_arr.push(list_arr[i].deductScore);
        }
        this.drawLine();
      }
      if (this.checked_three == true && i == 3) {
        this.checked_one = false;
        this.checked_two = false;
        let list_arr = this.perTimeList;
        for (let i = 0; i < list_arr.length; i++) {
          this.item.push(list_arr[i].perTimeTarget);
          this.public_arr.push(list_arr[i].perTime);
        }
        this.drawLine();
      }
    },
    // 当前时间
    dataTime() {
      const d = new Date();
      let yy = new Date().getFullYear();
      let mm = this.p(d.getMonth() + 1);
      let dd = this.p(d.getDate());
      let year = yy + "-" + mm + "-" + dd;
      this.data_time = year;
      this.getTaskStatistics(year);
      //   console.log(new Date().getFullYear());
    },
    // 选择时间
    getTime_month(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      let dd = this.p(d.getDate());
      const resDate = yy + "-" + mm + "-" + dd;
      this.data_time = resDate;
      this.time = false;
      this.getTaskStatistics(resDate);
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    async getTaskStatistics(time) {
      this.isShowloading = true;
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http
        .get(
          `yuepoints/getTaskStatistics?corpId=${corpId}&ddId=${userId}&date=${time}`
        )
        .then(res => {
          const {
            data: {
              praiseScoreList,
              deductScoreList,
              perTimeList,
              allTaskCode
            },
            errcode,
            errmsg
          } = res.data;
          if (errcode == "0000") {
            this.isShowloading = false;
            this.praiseScoreList = res.data.data.praiseScoreList;
            this.deductScoreList = res.data.data.deductScoreList;
            this.perTimeList = res.data.data.perTimeList;
            this.list = res.data.data.allTaskCode;
            let list_arr = this.praiseScoreList;
            this.item = [];
            this.public_arr = [];
            for (let i = 0; i < list_arr.length; i++) {
              this.item.push(list_arr[i].praiseScoreTarget);
              this.public_arr.push(list_arr[i].praiseScore);
            }
            this.drawLine();
          } else if (errcode == "5022") {
            this.isShowloading = false;
            this.$toast(errmsg);
          }
        });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // console.log(this.item)
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["目标", "任务完成情况"],
          show: true,

          right: "15%",
          y: "0",
          textStyle: {
            color: "#999",
            fontSize: "13"
          }
        },
        calculable: true,
        xAxis: {
          name: "(月)",
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          nameTextStyle: {
            color: "rgba(0, 114, 255, 0.88)"
          },
          axisLine: {
            lineStyle: {
              color: "rgba(136, 132, 132, 0.87)" // 颜色
              //   width: 3 // 粗细
            }
          }
        },
        yAxis: {
          name: "(名次)",
          splitLine: { show: false },
          type: "value",
          nameTextStyle: {
            color: "rgba(0, 114, 255, 0.88)",
            borderColor: "silver"
          }
          //   axisLine: {
          //     lineStyle: {
          //       color: "rgba(136, 132, 132, 0.87)" // 颜色
          //       //   width: 3 // 粗细
          //     }
          //   }
        },
        series: [
          {
            name: "目标",
            type: "line",
            color: "rgba(7, 193, 96, 0.81)",
            data: this.item,
            // areaStyle: {},
            // data: [0, 2, 4, 6, 8],
            // width: "100%",
            smooth: true
          },
          {
            name: "任务完成情况",
            type: "line",
            color: "rgba(0, 114, 255, 0.88)",
            data: this.public_arr,
            // areaStyle: {},
            // data: [0, 2, 4, 6, 8],
            // width: "100%",
            smooth: true
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  /deep/ .van-overlay {
    z-index: 2;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  /deep/ .van-switch {
    //   top: 6px;
    vertical-align: middle;
    margin-left: 15px;
  }
  .rankingChange_top {
    height: 45px;
    line-height: 45px;
    background: #fff;
    // text-align: left;
    color: #0072ffe0;
    // span {
    //   display: inline-block;
    //   width: 28%;
    // }
  }
  .left {
    float: left;
    margin: 20px;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
